<template>
  <!-- 预警项目统计-->
  <div class="app-container">
    <!-- 搜索表单 -->
    <div class="form-container">
      <el-form
        ref="queryForm"
        :model="filters"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="单位名称" prop="companyName">
          <el-input v-model="filters.companyName" placeholder="请输入单位名称" clearable size="small" />
        </el-form-item>
        <el-form-item label="项目名称" prop="proName">
          <el-input v-model="filters.proNum" placeholder="请输入项目名称" clearable size="small" />
        </el-form-item>
        <el-form-item label="时间">
          <label slot="label" v-html="`时&emsp;&emsp;间`" />
          <el-date-picker
            v-model="dateRange"
            size="small"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="true"
            @change="dateChange"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="btns-group">
      <el-button v-clickForbidden icon="el-icon-search" size="middle" @click="handleQuery">搜索</el-button>
      <el-button v-clickForbidden icon="el-icon-refresh" size="middle" @click="resetQuery">重置</el-button>
      <el-button v-clickForbidden icon="el-icon-download" size="middle" @click="exportData">导出</el-button>
    </div>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      stripe
      class="table-list"
      :summary-method="getSummaries"
      show-summary
      :row-style="rowClass"
      max-height="700px"
    >
      <el-table-column type="index" label="序号" width="51" align="center" />
      <el-table-column
        prop="proName"
        label="项目名称"
        min-width="180"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <a href="javascript:;" class="link-type" @click.stop="getProDetail(row.proId,row.proStatus)">
            <span>{{ row.proName }}</span>
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="proNum"
        label="项目编号"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="companyName"
        label="所属企业"
        min-width="200"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="项目地址"
        align="center"
        min-width="200 "
        prop="proAddress"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="数据速度异常(个)"
        align="center"
        width="130 "
        prop="isDataSpeed"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="数据位置异常(个)"
        align="center"
        width="130 "
        prop="isDataLocation"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="数据时间异常(个)"
        align="center"
        width="130 "
        prop="isDataTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="照片位置异常(个)"
        align="center"
        width="130 "
        prop="isImgLocation"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="照片时间异常(个)"
        align="center"
        width="130 "
        prop="isImgTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="合同单价(元)"
        align="center"
        width="120 "
        prop="contractPrice"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          {{ divideMoney(row.contractPrice,2) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { dataMethod } from '@/utils/tableObjectSpanMethod.js'
import { EarlyWarningProject, exportEarlyWarningProject } from '@/api/statisticalAnalysis/EarlyWarningProject'
import { mapState } from 'vuex'
export default {
  name: 'EarlyWarningProject',
  data() {
    return {
      /* 搜索条件 start*/
      highLevelSet: false, // 高级搜索
      dateRange: [], // 时间范围数组
      filters: { // 查询参数
        companyName: '', // 单位名称
        proName: '', // 项目名称
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      /* 搜索条件 end*/

      /* 列表 start*/
      tableData: [], // 列表
      selectRow: [], // 高亮数组
      loading: false,
      spanObj: {}
      /* 列表 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView
    }),
    // 高级搜索显示隐藏
    handleTagShow() {
      return this.highLevelSet
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 跳转项目详情
    getProDetail(id, proStatus) {
      if (!id) return
      this.$store.commit('basicInfo/SET_ProId', id)
      this.$store.commit('basicInfo/SET_ProStatus', proStatus)
      this.$router.push({
        path: '/projectControl/project-control-detail'
      })
    },
    // 选择时间
    dateChange(e) {
      this.filters.statisticsStartTime = e[0]
      this.filters.statisticsEndTime = e[1]
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = ['总计']
      const total = data.reduce((pre, row) => pre + this.divideMoney(row.contractPrice, 2), 0)
      const count = columns.length - 2
      for (let i = 0; i < count; i++) {
        sums.push('')
      }
      sums.push(this.divideMoney(total, 2))
      return sums
    },
    /* 列表 start*/
    // 获取列表
    async getList() {
      this.loading = true
      try {
        const { data } = await EarlyWarningProject(this.filters)
        this.tableData = data
        this.spanObj = dataMethod(this.tableData, ['proName', 'proNum', 'proAddress'], 'proName')
        this.loading = false
        // this.addTaleData()
      } catch {
        this.loading = false
      }
    },
    // 处理表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 列合并
      const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    },
    // list表格填充空白行
    addTaleData() {
      const arr = {}
      if (this.tableData.length < this.filters.pageSize) {
        this.tableData.push(arr)
        this.addTaleData()
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    // 搜索方法
    handleQuery() {
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.resetForm('queryForm')
      this.orgLeaderName = ''
      this.dateRange = []
      this.filters.statisticsStartTime = ''
      this.filters.statisticsEndTime = ''
      this.handleQuery()
    },
    // 导出
    async exportData() {
      const tableHeader = [
        {
          'key': 'proName',
          'label': '项目名称'
        },
        {
          'key': 'proNum',
          'label': '项目编号'
        },
        {
          'key': 'proAddress',
          'label': '项目地址'
        },
        {
          'key': 'isDataSpeed',
          'label': '数据速度异常'
        },
        {
          'key': 'isDataLocation',
          'label': '数据位置异常'
        },
        {
          'key': 'isDataTime',
          'label': '数据时间异常'
        },
        {
          'key': 'isImgLocation',
          'label': '照片位置异常'
        },
        {
          'key': 'isImgTime',
          'label': '照片时间异常'
        },
        {
          'key': 'contractPrice',
          'label': '合同单价'
        }
      ]
      const res = await exportEarlyWarningProject(tableHeader)
      if (!res) return
      this.downloadFileFlow(res, '预警项目统计')
    }
    /* 列表 end*/
  }
}
</script>
<style lang="scss" scoped>
</style>
